<template>
  <el-dialog
    title="骑手登陆密码修改"
    width="max-content"
    class="el-dialog-box"
    :visible.sync="dialogVisible"
    @close="closeDialog"
  >
    <div class="edit-label-content">
      <div class="container">
        <el-form :inline="true" ref="myForm" :model="form" class="demo-form-inline">
          <el-form-item
            label="新密码"
            :rules="[{ required: true, message: '不能为空', min: 6 ,max:6}]"
          >
            <el-input
              style="width: 400px"
              v-model="form.password"
              @input="handleInput"
              type="text"
              min="6"
              maxlength="6"
              placeholder="请输入"
              show-password
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 按键 -->
    <span slot="footer" class="dialog-footer">
      <div class="default-btn" @click="save">
        {{ $t("user.preservation") }}
      </div>
    </span>
  </el-dialog>
</template>

<script>
  import { encrypt } from "@/utils/crypto";
  export default {
    data() {
      return {
        dialogVisible: false,
        form: {
          id: "",
          password: "",
        },
      };
    },
    mounted() {},
    methods: {
      open(id, payload) {
        this.id = id;
        this.form.id = id;
        this.dialogVisible = true;
      },
      handleInput() {
        if(this.form.password){
          this.form.password = this.form.password.replace(/[\u4e00-\u9fa5\s]/g, '');
        }
      },
      save() {
        if (!this.form.password || this.form.password.length < 6) {
          this.$message({
            type: "error",
            message: "密码长度只能为6位",
          });
          return;
        }
        this.form.newPassword = encrypt(this.form.password);
        delete this.form.password;
        this.$http({
          url: this.$http.adornUrl("/platform/rider/update-password"),
          method: "put",
          data: this.$http.adornData(this.form),
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t("publics.operation"),
            type: "success",
            duration: 1500,
          });
        });
        this.dialogVisible = false;
      },
      closeDialog() {
        this.form ={
          id: "",
          password: "",
        }
        this.$refs.myForm.resetFields()
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    font-size: 14px;
  }
  .el-input {
    width: 100%;
  }
</style>
